<template>
  <view class="home">
    <!--搜索框-->
    <view class="search" @click="goSearch">
      <view class="input">
        <image src="/static/images/search-icon.png"></image>
        <text>需要搜索请点击</text>
      </view>
    </view>
    <!--轮播图-->
    <carousel :banner-list="bannerList"></carousel>
    <!-- 导航栏-->
    <nav-list :nav-list="navList"></nav-list>
    <!-- 楼层-->
    <floor v-for="(item,index) in floorList" :key="index" :floor="item"></floor>
  </view>
</template>

<script>
import {mapState} from "vuex";
import setTabBarBadge from "@/mixin/setTabBarBadge";
import Input from "@/component/Input/Input.vue";
import carousel from "@/pages/home/components/carousel/carousel.vue";
import navList from "@/pages/home/components/navList/navList.vue";
import floor from "@/pages/home/components/floor/floor.vue";

export default {
  mixins: [setTabBarBadge],
  methods: {
    /* 派发action发送请求获取轮播图的回调函数 */
    async fetchBannerListerList() {
      try {
        await this.$store.dispatch("homeStore/fetchBannerList")
      } catch (error) {
        uni.showToast({title: "获取轮播图失败", icon: "none", duration: 2000})
      }
    },
    /* 派发action发送请求获取分类选项的回调函数 */
    async fetchCatitemsList() {
      try {
        await this.$store.dispatch("homeStore/fetchCatitemsList")
      } catch (error) {
        uni.showToast({title: "获取分类选项失败", icon: "none", duration: 2000})
      }
    },
    /* 派发action发送请求获取楼层的回调函数 */
    async fetchFloorList() {
      try {
        await this.$store.dispatch("homeStore/fetchFloorList")
      } catch (error) {
        uni.showToast({title: "获取楼层失败", icon: "none", duration: 2000})
      }
    },
    goSearch() {
      uni.navigateTo({
        url: "/subPackages/search/search"
      })
    }
  },
  components: {
    Input,
    carousel,
    navList,
    floor

  },
  computed: {
    ...mapState("homeStore", ["floorList", "bannerList", "navList"])
  },
  onLoad() {
    this.fetchBannerListerList()
    this.fetchCatitemsList()
    this.fetchFloorList()
  },
}
</script>
<style scoped lang="scss">
.home {
  .search {
    box-sizing: border-box;
    width: 100%;
    height: 80rpx;
    background-color: #c00000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30rpx 0;


    .input {
      box-sizing: border-box;
      width: 95%;
      height: 60rpx;
      background-color: #ffffff;
      border-radius: 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #6b6b6b;
      font-size: 30rpx;

      image {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
}
</style>
